<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili</title>
    <style>
        #main_div{
            margin:100px;/*外边距*/
            width:750px;
            height: 420px;
            border:chartreuse 1px dashed;
            overflow: scroll
        }
        #logo{

            position: relative;
            top:6px;

        }
        a{
            text-decoration: none;
        }
        #title a:first-child{
            font-size: 20px;
            color:black;
        }
        #title a:first-child:hover{
            color:#00a1d6;

        }
        #title a:nth-child(n+2){
            margin:0 10px;
            color:black;
            font-size: 16px;
        }
        #title a:nth-child(n+2):hover{
            color:#00a1d6;
            border-bottom: 1px solid #00a1d6;
            padding-bottom: 5px;
        }
        #title a:last-child{
            margin:0 0 0 45px;
            color:#00a1d6;
            font-size: 14px;
            text-align: center;
            padding: 10px 0px 10px 0px;/*内容与元素边框的距离*/
            display: inline-block;/*行类块级元素*/
            width: 112px;
            height: 20px;
            border:#00a1d6 solid 1px;
            border-radius: 5px;
        }
        #title a:last-child:hover{
            color:white;
            padding: 10px 0px 10px 0px;
            background-color: #00a1d6;
        }
        #content div{
            width: 210px;
            height: 70px;
            float: left;
            margin: 10px 15px 10px 0px;
            
        }
        #content img{
            float:left;
        }/*图文绕排*/
        
        .a_name,.episode/*逗号表是都选择*/{
            color:black;
            font-size:14px;
            margin: 5px 5px 0px 80px
        }
        .a_name:hover{
            color:#00a1d6;
        }
        .episode{
            color:#00a1d6;
        }

    </style>
</head>
<body>
  <div id="main_div">
       <div id="title">
           <a href="#"target="blank">
               <img src="img/b_3.png" id="logo">
               番剧</a>
           <a href="#"target="blank">最新</a>
           <a href="#"target="blank">周一</a>
           <a href="#"target="blank">周二</a>
           <a href="#"target="blank">周三</a>
           <a href="#"target="blank">周四</a>
           <a href="#"target="blank">周五</a>
           <a href="#"target="blank">周六</a>
           <a href="#"target="blank">周日</a>
           <a href="#"target="blank">新番时间表</a>

       </div>
       <div id="content">
           <div>
               <a href="#" target="_blank">
                   <img src="img/b_1.webp">
                   <p class="a_name">
                       动画的名哈哈哈哈哈哈
                   </p>
                   <p class="episode"> 
                       第一话
                   </p>
               </a>
           </div>
           <div>
            <a href="#" target="_blank">
                <img src="img/b_1.webp">
                <p class="a_name">
                    动画的名哈哈哈哈哈哈
                </p>
                <p class="episode"> 
                    第一话
                </p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="img/b_1.webp">
                <p class="a_name">
                    动画的名哈哈哈哈哈
                </p>
                <p class="episode"> 
                    第一话
                </p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="img/b_1.webp">
                <p class="a_name">
                    动画的名哈哈哈哈哈哈
                </p>
                <p class="episode"> 
                    第一话
                </p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="img/b_1.webp">
                <p class="a_name">
                    动画的名哈哈哈哈哈哈
                </p>
                <p class="episode"> 
                    第一话
                </p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="img/b_1.webp">
                <p class="a_name">
                    动画的名哈哈哈哈哈哈
                </p>
                <p class="episode"> 
                    第一话
                </p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="img/b_1.webp">
                <p class="a_name">
                    动画的名哈哈哈哈哈哈
                </p>
                <p class="episode"> 
                    第一话
                </p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="img/b_1.webp">
                <p class="a_name">
                    动画的名哈哈哈哈哈哈
                </p>
                <p class="episode"> 
                    第一话
                </p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="img/b_1.webp">
                <p class="a_name">
                    动画的名哈哈哈哈哈哈
                </p>
                <p class="episode"> 
                    第一话
                </p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="img/b_1.webp">
                <p class="a_name">
                    动画的名哈哈哈哈哈哈
                </p>
                <p class="episode"> 
                    第一话
                </p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="img/b_1.webp">
                <p class="a_name">
                    动画的名哈哈哈哈哈哈
                </p>
                <p class="episode"> 
                    第一话
                </p>
            </a>
        </div>
        <div>
            <a href="#" target="_blank">
                <img src="img/b_1.webp">
                <p class="a_name">
                    动画的名哈哈哈哈哈哈
                </p>
                <p class="episode"> 
                    第一话
                </p>
            </a>
        </div>
        
  </div>
</body>
</html>